<script setup lang="ts">
import StnCollapsePopBtn from "../StnCollapsePopBtn"
import '../StnCollapsePopBtn/StnCollapsePopBtn.scss'
import {StIconIconify} from "st-common-ui-vue3"
import 'st-common-ui-vue3/es/components/StIconIconify/StIconIconify.css'
import Trash from "@iconify-icons/tabler/trash"
import Edit from "@iconify-icons/tabler/edit"

/**
 * 组件配置选项
 */
defineOptions({
  name: 'StnTableEditorDelBtnGroup',
})

/**
 * 组件参数
 */
withDefaults(
  defineProps<{
    // 编辑按钮文本
    editText?: string
    // 删除按钮文本
    delText?: string;
  }>(),
  {
    editText: '编辑',
    delText: '删除',
  }
)

/**
 * 自定义事件
 */
const emits = defineEmits<{
  /**
   * 编辑事件
   *
   * @param {"edit"} e
   */
  (e: 'edit'): void;
  /**
   * 删除事件
   *
   * @param {"del"} e
   */
  (e: 'del'): void;
}>()
</script>

<template>
  <div class="stn-table-editor-del-btn-group">
    <slot name="edit">
      <StnCollapsePopBtn
        type="primary"
        is-collapse
        text
        :btn-text="editText"
        @click="() => emits('edit')"
      >
        <template #icon>
          <slot name="edit-icon">
            <st-icon-iconify :icon="Edit"/>
          </slot>
        </template>
      </StnCollapsePopBtn>
    </slot>
    <slot name="del">
      <StnCollapsePopBtn
        type="error"
        is-collapse
        text
        :btn-text="delText"
        @click="() => emits('del')"
      >
        <template #icon>
          <slot name="del-icon">
            <StIconIconify :icon="Trash"/>
          </slot>
        </template>
      </StnCollapsePopBtn>
    </slot>
  </div>
</template>

<style scoped lang="scss">
.stn-table-editor-del-btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
</style>
